<template>
	<view class="page">
		<view class="top-box">
			<view class="date-box">
				{{timeCycle(nowDate, 4)}}
			</view>
			<view class="tip">永远不要停下，努力奔跑的脚步</view>
		</view>
		<view class="info">
			<view class="box d_flex j_a a_c">
				<view class="item">
					<view class="name">今日掌握词汇</view>
					<view class="num"><text>{{reportData.dayGraspTotal}}</text>词</view>
				</view>
				<view class="item">
					<view class="name">累计掌握词汇</view>
					<view class="num"><text>{{reportData.graspTotal}}</text>词</view>
				</view>
			</view>
			<view class="box2">
				<view class="title d_flex_b">
					<view class="tit-c">最近一周掌握词汇量</view>
					<view class="unit">单位：个</view>
				</view>
				<view class="chart-box" v-if="chartList.length>0">
					<view class="item d_flex a_c">
						<view class="chart-bar" v-for="(item,i) in chartList" :key="i" :style="'height:'+(maxVal+40)+'px'">
							<view class="val">{{item.val}}</view>
							<view class="bar" :style="'height:'+parseInt(item.val*10000/maxVal)/100 +'%'"></view>
							<view class="date" >{{handleTime(item.date)}}</view>
						</view>
					</view>
				</view>
				<view class="chart-box" v-else>
					<u-empty mode="data" text="暂无数据" icon="http://cdn.uviewui.com/uview/empty/data.png"></u-empty>
				</view>
			</view>
		</view>
		<view class="book-list">
			<view class="tit">已学习词书概览</view>
			<view class="item-box">
				<view class="item d_flex_b" v-for="item in reportData.userWordBooks" :key="item.id" @click="toInfo(item)">
					<image class="book" :src="item.imgUrl" mode=""></image>
					<view class="detail">
						<view class="name">{{item.name}}</view>
						<view class="sub d_flex j_a a_c">
							<view class="sub-item">
								<view class="num green">{{item.graspTotal}}</view>
								<view class="txt">掌握词汇(个)</view>
							</view>
							<view class="sub-item">
								<view class="num theme">{{awaitStudy(item)}}</view>
								<view class="txt">待掌握词汇(个)</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				chartList:[],
				maxVal:90,
				reportData:'',
				nowDate:new Date().getTime()/1000,
			};
		},
		onShow() {
			this.getData();
		},
		methods:{
      handleTime(val){
        let date=new Date(val.replace(/-/g,'/').replace(/\"/g,''));
        let date1=new Date();
        let cur=(date.getMonth() + 1)+'/'+date.getDate()
        let cur1=(date1.getMonth() + 1)+'/'+date1.getDate()

        if(!val){
          return '未知';
        }else if(cur1==cur){
          return '今日';
        }else{
          let dd=new Date(val.replace(/-/g,'/').replace(/\"/g,''));
          var m = dd.getMonth() + 1;
          var d = dd.getDate();
          return m+'/'+d
        }
      },
			getData(){
				this.chartList=[];
				this.$http.get1("/api/client/word/getUserGraspWordReports").then(res=>{
					if(res.code==200){
						this.reportData=res.data;
						let obj=res.data.userGraspWordMap;
						for(let key in obj){
							let o={}
							o.date=key;
							o.val=obj[key]
							if(this.maxVal<o.val){
								this.maxVal=o.val;
							}
							this.chartList.push(o);
						}
						console.log(this.chartList);
					}
				})
			},
			toInfo(item){
				if(item.isGroup==1){
					uni.setStorageSync('curBookData',item);
					uni.navigateTo({
						url:'/pages/book/list?id='+item.id
					})
				}else{
					uni.setStorageSync('curBookData',item);
					uni.navigateTo({
						url:'/pages/book/book?gid=&id='+item.id
					})
				}
			},
      // 待掌握词汇
      awaitStudy(item) {
        let res = item.total - item.graspTotal
        if (res < 0) {
          return 0
        }
        return res
      },
		}
	}
</script>

<style lang="scss">
page{
	background-color: #F2F3F8;
}
.top-box{
	background: #5480F8;
	height: 300rpx;
	padding: 40rpx 0;
	text-align: center;
	.date-box{
		font-size: 28rpx;
		color: #FFFFFF;
		position: relative;
		margin-bottom: 20rpx;
		&::after{
			position: absolute;
			content: '';
			display: flex;
			right: calc(50% - 120rpx);
			top:50%;
			width:40rpx;
			height: 1rpx;
			border-top: 2rpx solid #FCFDFF;
		}
		&::before{
			position: absolute;
			content: '';
			display: flex;
			left: calc(50% - 120rpx);
			top:50%;
			width:40rpx;
			height: 1rpx;
			border-top: 2rpx solid #FCFDFF;
		}
	}
	.tip{
		font-size: 22rpx;
		color: #FFFFFF;
	}
}
.info{
	margin: -120rpx auto 30rpx;
	width: 686rpx;
	padding: 40rpx 32rpx;
	box-sizing: border-box;
	background-color: #FFFFFF;
	border-radius: 20rpx;
	.box{
		padding-bottom: 30rpx;
		border-bottom: 1rpx solid #eee;
		margin-bottom: 30rpx;
		.item{
			text-align: center;
			font-size: 28rpx;
			color: #333333;
			.name{
				margin-bottom: 20rpx;
			}
			.num{
				font-size: 22rpx;
				color: #BBBFCC;
				text{
					color:#5480F8;
					font-size: 36rpx;
					font-weight: bold;
				}
			}
		}
	}
	.tit{
		font-size: 28rpx;
		font-weight: 500;
		color: #575A64;
		margin-bottom: 30rpx;
	}
	.unit{
		font-size: 24rpx;
		color: #BBBFCC;
	}
}
.title{
	margin-bottom: 20rpx;
	font-size: 28rpx;
	font-weight: 500;
	color: #575A64;
	.unit{
		font-size: 24rpx;
		color: #BBBFCC;
	}
}
.chart-bar{
	margin-right: 60rpx;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
	
	.val{
		font-size: 20rpx;
		color: #BBBFCC;
	}
	.bar{
		width: 20rpx;
		border-radius: 10rpx;
		background: linear-gradient(180deg, #36AFFF 0%, #5480F8 100%);
		margin: 10rpx 0 20rpx;
	}
	.date{
		font-size: 22rpx;
		color: #575A64;
		&.ac{
			color: #5480F8;
		}
	}
}
.book-list{
	width: 686rpx;
	margin: 30rpx auto;
	background-color: #fff;
	border-radius: 20rpx;
	padding: 30rpx;
	.tit{
		font-size: 36rpx;
		font-weight: bold;
		color: #333333;
	}
	.item-box{
		.item{
			padding: 40rpx 0;
			border-bottom: 1rpx solid #E4E5EC;
			.book{
				width: 120rpx;
				height: 148rpx;
				margin-right: 30rpx;
			}
			.detail{
				height: 148rpx;
				flex:1;
				width:300rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				.name{
					font-size: 32rpx;
					font-weight: bold;
					color: #333333;
				}
				.sub-item{
					text-align: center;
					.txt{
						font-size: 20rpx;
						color: #575A64;
						margin-top: 10rpx;
					}
					.num{
						font-size: 32rpx;
						font-weight: bold;
					}
				}
			}
		}
	}
}

</style>
